<template>
  <view :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask" @touchmove.stop.prevent="stopPrevent" class="mask">
    <view @click.stop.prevent="stopPrevent" class="mask-content">
      <view class="mask-content-topbar">
        <view @click="toggleMask" class="left">取消</view>
        <view @click="pubComment" class="right">发送</view>
      </view>
      <view class="mask-content-input">
        <textarea
          :cursor-spacing="100"
          :focus="focus"
          :maxlength="1000"
          :placeholder="placeholder"
          :show-confirm-bar="false"
          class="textarea"
          v-model="selfParams.comment"
        ></textarea>
      </view>
      <div class="mask-plug">
        <obitUploadImg :dataList.sync="selfParams.fileIdList" showType="5"></obitUploadImg>
      </div>
    </view>
  </view>
</template>

<script>
import obitUploadImg from '@/app-modules/components/obit-upload-img/obit-upload-img'
import utils from '@/app-modules/utils/utils'
export default {
  components: { obitUploadImg },
  name: 'ygcComment',
  //属性
  props: {
    placeholder: {
      type: String
    }
  },
  data() {
    return {
      maskState: 0,
      selfParams: {
        comment: '',
        fileIdList: []
      },
      focus: false
    }
  },
  created() {},
  methods: {
    stopPrevent() {},
    toggleMask(type) {
      let timer = type === 'show' ? 10 : 0
      let state = type === 'show' ? 1 : 0
      setTimeout(() => {
        this.maskState = state
        // #ifdef APP-PLUS
        // 安卓app软键盘自动弹出有点问题，暂时还没有很好的解决方案，所以就禁止安卓app软键盘自动弹出，如果哪位朋友有好的解决方案可以在评论里告诉大家参考一下
        if (uni.getSystemInfoSync().platform == 'ios') {
          this.focus = this.maskState ? true : false
        } else {
          this.focus = this.maskState ? true : false
        }
        // #endif
        // #ifndef APP-PLUS
        this.focus = this.maskState ? true : false
        // #endif
      }, timer)
    },
    pubComment() {
      if (!this.selfParams.comment) {
        this.$show('随便说点啥吧~~')
        return
      }
      let param = utils.util.cloneObj(this.selfParams)
      this.$emit('pubComment', param)
      utils.util.cleanObj(this.selfParams)
    }
  }
}
</script>

<style lang="scss" scoped>
$font-color-base: #606266;
$base-color: #5a9bec;
$icon-color: #ef6a00;
.mask {
  display: flex;
  align-items: flex-end;
  position: fixed;
  left: 0;
  top: var(--window-top);
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 9995;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  .mask-plug {
    padding: 0rpx 16rpx;
    color: $icon-color;
    .iconfont {
      padding-left: 10rpx;
    }
  }
  .mask-content {
    width: 100%;
    background: #ffffff;
    transform: translateY(100%);
    transition: 0.5s; //底部弹出的持续时间
    -webkit-transition: 0.5s; //底部弹出的持续时间
    // overflow-y:scroll;
    display: flex;
    flex-direction: column;
    .mask-content-topbar {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 20rpx 30rpx 10rpx;
      font-size: 32rpx;
      height: 52rpx;
      .left {
        padding: 10rpx 0rpx;
        color: $font-color-base;
      }
      .right {
        padding: 2rpx 30rpx;
        border-radius: 6rpx;
        color: #ffffff;
        font-weight: 500;
        background-color: $base-color;
      }
    }
    .mask-content-input {
      width: 718rpx; //如果textarea的宽带有问题可以把width改为100%试试
      // width: 100%;
      padding: 10rpx 16rpx 10rpx;
      .textarea {
        height: 100px;
        width: 686rpx; //如果textarea的宽带有问题可以把width改为100%试试
        // width: 100%;
        padding: 16rpx;
        border: 2rpx solid #d5d5d6;
        border-radius: 8rpx;
      }
    }
  }
  &.none {
    display: none;
  }
  &.show {
    background: rgba(0, 0, 0, 0.4);
    .mask-content {
      transform: translateY(0);
    }
  }
}
</style>
